<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- button.btn.btn${我是btn$$}*5 -->
  <!-- button.btn.btn$.#btnId${我是btn$$}*5 -->
  <!-- <button class="btn btn1" id="btnId1">我是btn01</button>
  <button class="btn btn2" id="btnId2">我是btn02</button>
  <button class="btn btn3" id="btnId3">我是btn03</button>
  <button class="btn btn4" id="btnId4">我是btn04</button>
  <button class="btn btn5" id="btnId5">我是btn05</button> -->

  <!-- button#btnId$.btn.btn${我是btn$$}*5 -->
  <button id="btnId1" class="btn btn1">我是btn01</button>
  <button id="btnId2" class="btn btn2">我是btn02</button>
  <button id="btnId3" class="btn btn3">我是btn03</button>
  <button id="btnId4" class="btn btn4">我是btn04</button>
  <button id="btnId5" class="btn btn5">我是btn05</button>

  <div class="web">
    <h1>1</h1>
    <mark>2</mark>
    <ul>
      <li>
        <a href="">
          <p>我是链接1</p>
        </a>
      </li>
      <li>
        <a href="">
          <p>我是链接2</p>
        </a>
      </li>
      <li>
        <a href="">
          <p>我是链接3</p>
        </a>
      </li>
      <li>
        <a href="">
          <p>我是链接4</p>
        </a>
      </li>
      <li>
        <a href="">
          <p>我是链接5</p>
        </a>
      </li>
    </ul>
  </div>






  <script>
    let ul = document.querySelector("ul");
    console.log(ul);



    // console.log(document.getElementById("btnId1"));
    // console.log(document.getElementsByClassName("btn1"));


    let idbtn = document.getElementById("btnId1");
    let classbtn = document.getElementsByClassName("btn");
    let tagbtn = document.getElementsByTagName("button");


    // idbtn.addEventListener("click", function () {
    //   console.log("id");
    // })





    // HTMLCollection => Array ?
    // classbtn[0].addEventListener("click", function () {
    //   console.log("class");
    // })


    // for (let i = 0; i < classbtn.length; i++) {
    //   classbtn[i].addEventListener("click", function () {
    //     console.log("class");
    //   })
    // }


    let query_btnid = document.querySelector("#btnId1");
    let query_btn = document.querySelector(".btn");//根据CSS3选择器语法获取元素，永远获取第一个元素
    let query_Allbtn = document.querySelectorAll(".btn");
    // console.log(query_btnid);
    // console.log(query_btn);
    // console.log(query_Allbtn);
    // query_Allbtn.forEach((item, index, obj) => {
    //   item.addEventListener("click", function () {
    //     console.log("hahaha");
    //   })
    // })






    // DOM
    // 元素节点 获取、添加、修改、删除、克隆
    // 属性节点 获取、修改、移除
    // 文本节点 获取、修改
    // 注释节点 

    // document.querySelector();
    // document.querySelectorAll();

    // document.getElementById()	
    // document.getElementsByTagName()	
    // document.getElementsByClassName()



  </script>
</body>

</html>